<template>
  <div class="list-container">
    <div class="list-head">
      <img src="@/assets/images/back.png" alt="" class="back" @click="onBack">
      <span class="head-title">重庆市公共法律服务自助终端</span>
    </div>
    <div class="content">
      <div class="list-items">
        <div class="item bred">重庆市农民工讨薪法律援助</div>
        <div class="item bblue">重庆市农民工讨薪咨询</div>
        <div class="item bgary">国内农民工欠薪求助</div>
      </div>
    </div>
    <!-- <div class="foot">
      <div class="foot-item">重庆市司法局</div>
      <div class="foot-item">重庆市普法办</div>
    </div> -->
  </div>
</template>

<script>
  export default {
    methods: {
      onBack() {
        this.$router.go(-1)
      }
    }
  }
</script>

<style lang="less" scoped>
.content{
  min-height: calc(100vh - .74rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.list-head{
  background: #0B78E6;
  height: .44rem;
  position: relative;
  text-align: center;
  .back{
    position: absolute;
    width: .26rem;
    height: .26rem;
    display: block;
    left: .12rem;
    top: .09rem;
  }
  .head-title{
    font-size: .16rem;
    line-height: .44rem;
    color: #fff;
  }
}
  .list-items{
    display: block;
    padding: 0 .3rem;
    .item{
      width: 100%;
      margin-bottom: .2rem;
      font-size: .2rem;
      color: #fff;
      height: .6rem;
      line-height: .6rem;
      text-align: center;
      &.bred{
        background: rgb(207, 120, 138);
      }
      &.bblue{
        background: rgb(0, 162, 233);
      }
      &.bgary{
        background: rgb(139, 137, 193);
      }
    }
  }
  .foot{
    height: .3rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: .13rem;
    line-height: 1.2;
    background: #0b78e6;
    color: #fff;
  }
</style>